<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M552.83712 821.8112c0 14.14144 11.45856 25.6 25.6 25.6l389.18144 0c14.14144 0 25.6-11.45856 25.6-25.6s-11.45856-25.6-25.6-25.6L578.43712 796.2112C564.29568 796.2112 552.83712 807.66976 552.83712 821.8112z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M967.61856 934.94272 393.48224 934.94272c-14.14144 0-25.6 11.45856-25.6 25.6s11.45856 25.6 25.6 25.6l574.13632 0c14.14144 0 25.6-11.45856 25.6-25.6S981.76 934.94272 967.61856 934.94272z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M412.64128 840.96c0.29696-0.3072 0.512-0.6656 0.79872-0.99328 0.64512-0.59392 1.37216-1.18784 1.95584-1.78176L826.0608 427.53024c0.01024 0 0.02048-0.01024 0.03072-0.02048s0.01024-0.02048 0.02048-0.03072l76.58496-76.58496c32.12288-32.12288 49.8176-74.83392 49.8176-120.25856s-17.70496-88.13568-49.8176-120.25856l-22.70208-22.70208c-32.12288-32.13312-74.84416-49.8176-120.25856-49.8176s-88.12544 17.69472-120.25856 49.8176L152.17664 574.98624c-0.58368 0.57344-1.14688 1.30048-1.72032 1.91488-0.32768 0.29696-0.70656 0.52224-1.03424 0.83968-1.05472 1.04448-1.91488 2.19136-2.75456 3.35872-0.09216 0.11264-0.18432 0.22528-0.27648 0.33792-0.09216 0.14336-0.21504 0.26624-0.29696 0.4096-57.78432 71.69024-109.01504 329.3184-114.85184 359.424-1.65888 8.57088 1.15712 17.38752 7.4752 23.40864 4.8128 4.57728 11.15136 7.05536 17.65376 7.05536 2.02752 0 4.06528-0.23552 6.08256-0.72704 28.98944-7.09632 278.528-69.39648 347.38176-127.77472C410.79808 842.51648 411.77088 841.8304 412.64128 840.96zM203.73504 595.84512l377.25184-377.25184 190.80192 190.8224-377.2416 377.2416L203.73504 595.84512zM675.67616 123.88352c22.45632-22.44608 52.30592-34.816 84.06016-34.816s61.60384 12.36992 84.04992 34.816l22.71232 22.71232c22.44608 22.44608 34.816 52.29568 34.816 84.04992s-12.36992 61.60384-34.816 84.04992l-58.5216 58.5216L617.17504 182.39488 675.67616 123.88352zM171.73504 636.25216l182.85568 182.86592c-55.66464 30.9248-174.42816 68.096-264.93952 92.09856C109.81376 817.08032 142.336 693.3504 171.73504 636.25216z' fill='${(isStr.value ? colors.value : colors.value[2]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
